import videojs from 'video.js';
import './Head.scss'
import {PlaybackRatesZhiXin} from "../PlaybackRates/PlaybackRates";

declare module 'video.js' {
  interface VideoJsPlayerOptions {
    headZhiXin?: HeadZhiXinOptions;
  }

  interface VideoJsPlayer {
    playbackRatesZhiXin(val?: number[]): number[] | void
  }
}

export interface HeadZhiXinOptions extends videojs.ComponentOptions {
  /**
   * 倍速
   */
  playbackRates?: number[];
  title?: string;
  name?: string;
}

export class HeadZhiXin extends videojs.getComponent('Component') {
  private playbackRates: PlaybackRatesZhiXin | undefined;

  constructor(player: videojs.Player, options: HeadZhiXinOptions, ready?: videojs.Component.ReadyCallback) {
    super(player, options as videojs.ComponentOptions, ready);
    player.playbackRatesZhiXin = (val: number[]) => {
      this.playbackRatesZhiXin(val)
    }
    // @ts-ignore
    this.name_ = options?.name || 'HeadZhiXin'
  }

  createEl(tagName?: string, properties?: any, attributes?: any): Element {
    const dom = videojs.dom.createEl('div', {
      className: 'vjs-HeadZhiXin'
    })
    return dom
  }

  private getOptions() {
    return this.options_ as HeadZhiXinOptions
  }

  playbackRatesZhiXin(val?: number[]): number[] | void {
    if (!val) {
      return this.getOptions().playbackRates
    }
    if (!this.playbackRates) {
      this.getOptions().playbackRates = val
      this.initPlaybackRatesZhiXin()
    }
    if (this.playbackRates) {
      this.playbackRates.playbackRatesZhiXin(val)
    }
  }

  private initPlaybackRatesZhiXin() {
    const options = this.options_ as HeadZhiXinOptions
    let playbackRates = options.playbackRates || [0.5, 1, 1.25, 1.5, 2, 3, 4, 5]
    this.playbackRates = new PlaybackRatesZhiXin(this.player(), playbackRates);
    this.addChild(this.playbackRates)
  }


  initChildren() {
    this.initPlaybackRatesZhiXin()
  }
}
